<template>
	<view class="myPages" :style="{paddingTop: `${search.top+search.height+10}px`}">
		<myHeard :search="search" :title="title" @goPath="goBack"></myHeard>
		<view class="myPages__Main" v-if="recList.length==0">
			<image class="myPages__MainKong" src="/static/images/mxIcon.png"></image>
		</view>
		<view class="myPages__Main" v-else>
			<view @click="goDetails(item)" class="myPages__MainItems" v-for="(item,index) in recList" :key="index">
				<view class="myPages__MainItemsTop">
					<span>{{item.title | ff_title}}</span>
					<span>{{item.updateMoney | ff_updateMoney}}</span>
				</view>
				<view class="myPages__MainItemsBotton">
					<view class="myPages__MainItemsBottonsLeft">
						<span>{{item.payMethodShow ? item.payMethodShow : '无'}}</span>
						<span>{{item.createTime | ff_createTime}}</span>
					</view>
					<view class="myPages__MainItemsBottonsRight">余额: {{item.walletMoney}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import myHeard from '@/components/myHeard/index.vue'
	export default {
		components: {
			myHeard
		},
		data() {
			return {
				title: '账户明细',
				recList: [],
				pageNum: 1,
				pageSize: 10,
			}
		},
		onLoad() {
			// #ifndef H5
			let search = uni.getMenuButtonBoundingClientRect()
			this.$store.commit('updataSearch', search);
			// #endif
			this.initUserWxRecList();
		},
		computed: {
			search() {
				return this.$store.state.search;
			},

		},
		onShow() {
			
		},
		onReachBottom() {
			this.pageNum++;
			this.initUserWxRecList();
		},
		filters: {
			ff_title(data){
				return data.split(' ')[0];
			},
			ff_updateMoney(item){
				return item>0?`+${item}`:item;
			},
			ff_createTime(date) {
				date = new Date(date)
				const year = date.getFullYear()
				const month = date.getMonth() + 1
				const day = date.getDate()
				const hour = date.getHours()
				const minute = date.getMinutes()
				const second = date.getSeconds()

				function formatNumber(n) {
					n = n.toString()
					return n[1] ? n : '0' + n
				}
				return `${year}年${month}月${day}日` + ' ' + `${formatNumber(hour)}:${formatNumber(minute)}`;
			}
		},
		methods: {
			goDetails(item){
				if(item.relateId==0){
					uni.showToast({
						icon: 'none',
						title: '暂无详情'
					})
					return
				}
				uni.navigateTo({
					url: `/package/myAccountDetails/index?walletLogId=${item.walletLogId}`
				})
			},
			initUserWxRecList() {

				uni.showLoading({
					title: '加载中',
					mask: true
				});
				this.$api.userWalletLogWxList({
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}).then(res => {
					if (res.code == 200) {
						
						this.recList = [...this.recList, ...res.rows];
						

					}
				})
			},
			goPath(url) {
				uni.navigateTo({
					url
				})
			},
			goBack() {
				uni.navigateBack()
			},

		}
	}
</script>

<style scoped lang="scss">
	.myPages {
		min-height: 100vh;
		background-color: #F7F8FC;
		box-sizing: border-box;
		.myPages__MainKong{
			width: 408rpx;
			height: 408rpx;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
		}
		
		.myPages__MainItemsTop{
			height: 40rpx;
			font-size: 28rpx;
			font-family: 蘋方-簡;
			font-weight: normal;
			line-height: 40rpx;
			color: #2B2B33;
		}
		.myPages__MainItemsBotton{
			height: 34rpx;
			font-size: 24rpx;
			font-family: 蘋方-簡;
			font-weight: normal;
			line-height: 34rpx;
			color: #868896;
			display: flex;
			    justify-content: space-between;
			    margin-top: 12rpx;
		}
		.myPages__MainItemsBottonsLeft{
			height: 34rpx;
			font-size: 24rpx;
			font-family: 蘋方-簡;
			font-weight: normal;
			line-height: 34rpx;
			color: #868896;
			span:nth-child(2){
				margin-left: 20rpx;
			}
		}
		.myPages__MainItemsBottonsRight{
			
		}
		

		.myPages__Main {
			box-sizing: border-box;
			width: 100%;
			padding: 32rpx;

			.myPages__MainItems {
				width: 100%;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 40rpx rgba(228, 228, 245, 0.4);
				opacity: 1;
				border-radius: 40rpx;
				height: 146rpx;
				padding: 32rpx;
				box-sizing: border-box;
				margin-bottom: 20rpx;
			}
		}

		.myPages__MainItemsTopLeft {
			display: flex;
			align-items: center;

			span {
				display: inline-block;
				height: 40rpx;
				font-size: 28rpx;
				font-family: 'DIN';
				font-weight: normal;
				line-height: 40rpx;
				color: #2B2B33;
				margin-right: 14rpx;
			}

			span:nth-child(3) {
				width: 64rpx;
				height: 35rpx;
				background: rgba(240, 65, 77, 0.02);
				border: 2rpx solid #F0414D;
				opacity: 1;
				border-radius: 8rpx;
				font-size: 20rpx;
				font-family: 'DIN';
				font-weight: normal;
				box-sizing: border-box;
				line-height: 35rpx;
				color: #F0414D;
				opacity: 1;
				text-align: center;
			}
		}

		.myPages__MainItemsTopMyItems--actColor {

			.myPages__MainItemsTopMyItemsHeardText {
				color: #7B7D8D !important;
			}

			span {
				color: #7B7D8D !important;
			}
		}

		.myPages__MainItemsTop {
			display: flex;
			justify-content: space-between;
		}

		.myPages__MainItemsTopRight {
			height: 40rpx;
			font-size: 28rpx;
			font-family: 'DIN';
			font-weight: normal;
			line-height: 40rpx;
			color: #2B2B33;
		}

		.myPages__MainItemsBottom {
			margin-top: 8rpx;
			height: 34rpx;
			font-size: 24rpx;
			font-family: 'DIN';
			font-weight: normal;
			line-height: 34rpx;
			color: #868896;
		}

		.myPages__MainItemsTopMyItems {
			height: 84rpx;
			background: #F7F8FC;
			opacity: 1;
			border-radius: 32rpx;
			display: flex;
			justify-content: space-between;
			padding: 0 32rpx;
			box-sizing: border-box;
			margin-top: 16rpx;

			span {
				display: inline-block;
				height: 84rpx;
				line-height: 84rpx;
				font-size: 26rpx;
				font-family: 'DIN';
				font-weight: normal;
				color: #2B2B33;
			}

			span:nth-child(2) {
				margin: 0 24rpx;
			}
		}

		.myPages__MainItemsTopMyItemsHeardText {
			height: 84rpx;
			line-height: 84rpx;
			font-size: 26rpx;
			font-family: 'DIN';
			font-weight: normal;
			color: #2B2B33;
		}

		// <view class="myPages__MainItemsTopMyItems">
		// 	<view class="myPages__MainItemsTopMyItemsHeard">
		// 		<span>收益</span>
		// 		<span>1/2</span>
		// 		<span>+50元</span>
		// 	</view>
		// 	<view class="myPages__MainItemsTopMyItemsHeardText">>
		// 		已入账
		// 	</view>
		// </view>


	}
</style>
